<template>
  <uv-popup ref="popupRef" mode="bottom" round="20rpx" bgColor="#0b204c">
    <view class="popup-main">
      <view class="popup-container">
        <view class="popup-item" v-for="(item, index) in actions" :key="index" @click="handleSelect(index, item)">{{ item[keyName] }}</view>
      </view>

      <view class="popup-cancel" @click="handleCancel">
        <view>{{ cancelText }}</view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </view>
  </uv-popup>
</template>

<script>
export default {
  name: "ConfirmPopup",
  props: {
    actions: {
      type: Array,
      default: () => [],
    },
    keyName: {
      type: String,
      default: "name",
    },
    async: {
      type: Boolean,
      default: false,
    },
    cancelText: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    open() {
      this.$refs.popupRef.open();
    },
    close() {
      this.$refs.popupRef.close();
    },
    handleCancel() {
      this.$emit("cancel");
      this.close();
    },
    handleSelect(index, value) {
      this.$emit("select", { index, value });
      if (!this.async) {
        this.close();
      }
    },
  },
};
</script>

<style scoped>
.popup-main {
  font-style: 32rpx;
  color: #fff;
}
.popup-item {
  height: 96rpx;
  line-height: 96rpx;
  text-align: center;
}
.popup-item + .popup-item {
  border-top: 2rpx solid rgba(255, 255, 255, 0.2);
}
.popup-cancel {
  height: 96rpx;
  line-height: 96rpx;
  text-align: center;
  border-top: 20rpx solid rgba(255, 255, 255, 0.2);
}
</style>
